import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate';
import { updateRole } from '@/api/role'
Vue.use(Vuex)

export default new Vuex.Store({
  // 严格模式
  strict: true,
  // 定义数据
  state: {
    count: 0,
    role: {
      isShow: false,
      userInfo: null
    },
    updateSuccess: false
  },
  // 定义修改数据的方法
  // 不能写异步
  mutations: {
    increment (state) {
      state.count++
    },
    // 参数 state 代表的是在 state 中存储的数据
    // data 代表调用当前方法的时候传递的参数
    updateRole (state, data) {
      const { isShow, userInfo } = data
      if (isShow) state.updateSuccess = false
      state.role.isShow = isShow
      state.role.userInfo = userInfo
    },
    updateSuccess (state, data) {
      state.updateSuccess = data
    }
  },
  // 定义方法
  // 写异步方法
  actions: {
    // context 上下文对象
    roleUpdate (context, data) {
      const id = context.state.role.userInfo.m_id
      // 调用 mutations 中的方法
      // context.commit('updateRole', data)
      // 调用 api 中的方法
      updateRole({...data, id}).then(res => {
        // 调用 mutations 中的方法
        context.commit('updateRole', { isShow: false })
        context.commit('updateSuccess', true)
      })
    }
  },
  modules: {
  },
  plugins: [
    createPersistedState({
      storage: window.sessionStorage,
      // 只持久化 count
      reducer: state => ({
        count: state.count
      })
    })
  ]
})

// vuex 问到非常高
// vuex 的使用 不限定于组件，可以在任意的 vue 组件传值 存储的数据刷新后会回复默认状态
   // 可以利用 本地存储持久化数据 
   // npm 插件 vuex-persistedstate 
// state -> 存储数据 state 响应式数据 state 中的值改变后视图会自动更新
    // 不能直接修改 state 中的值
// mutations -> 修改数据 只能通过 mutations 修改 
    // 参数1 state 代表在 state 中存储的数据, 可以接受多个参数，其余的参数调用 mutations 中方法的时候传递的参数
    // 触发 mutations 中的方法。 store.commit('定义的函数', 传递的参数)
    // 只能触发同步的方法

// actions -> 异步修改数据
    // 参数1 context 上下文对象，可以调用 mutations 中的方法 context.commit('定义的函数', 传递的参数)
      // context { commit, state }
      // 触发 actions 中的方法。 store.dispatch('定义的函数', 传递的参数)

// getters -> 获取数据
    // 在 vue 页面中 computed 一样  缓存，依赖其他数据

    // 100一个字
